<nz-card style="width:100vw; height: 89vh; line-height: 1.3;" nzTitle="User Info">
    <div nz-row nzGutter="24">
        <nz-col [nzSpan]="6" class="label-info">
            <span>User Id</span>
        </nz-col>
        <nz-col class="content-info">
            <span>{{userInfo?.userId}}</span>
        </nz-col>
    </div>
    <nz-divider/>
    <div nz-row nzGutter="24">
        <nz-col [nzSpan]="6" class="label-info">
            <span>User Name</span>
        </nz-col>
        <nz-col class="content-info">
            <span>{{userInfo?.username}}</span>
        </nz-col>
    </div>
    <nz-divider/>
    <div nz-row nzGutter="24">
        <nz-col [nzSpan]="6" class="label-info">
            <span>Dept Name</span>
        </nz-col>
        <nz-col class="content-info">
            <span>{{userInfo?.deptName}}</span>
        </nz-col>
    </div>
    <nz-divider/>
    <div nz-row nzGutter="24">
        <nz-col [nzSpan]="6" class="label-info">
            <span>PhoneNumber</span>
        </nz-col>
        <nz-col class="content-info">
            <span>{{userInfo?.phoneNumber}}</span>
        </nz-col>
    </div>
    <nz-divider/>
    <div nz-row nzGutter="24">
        <nz-col [nzSpan]="6" class="label-info">
            <span>Roles:</span>
        </nz-col>
        <nz-col class="content-info">
            {{userInfo?.roleKeys?.join(',')}}
        </nz-col>
    </div>
    <nz-divider/>
    <div nz-row nzGutter="24">
        <nz-col [nzSpan]="6" class="label-info">
            <span>Groups:</span>
        </nz-col>
        <nz-col class="content-info">
            {{userInfo?.groupCodes?.join(',')}}
        </nz-col>
    </div>
    <nz-divider/>
    <div nz-row nzGutter="24">
        <nz-col [nzSpan]="6" class="label-info">
            <span>Perms:</span>
        </nz-col>
        <nz-col [nzSpan]="18" class="content-info">
            {{userInfo?.perms?.join(' , ')}}
        </nz-col>
    </div>
  </nz-card>

  